<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
    <meta name="format-detection" content="telephone=no" />
    <title>测试my.js的touch方法，测试点透问题</title>
    <script src="../my.js"></script>
    <script src="touch.js"></script>
    <style>
    em {
        display: block;
        color: red;
        font-style: normal;
    }
    .clickme {
        background-color: #eee;
        cursor: pointer;
        border: 1px solid red;
    }
    </style>
</head>
<body>
    <div id="console"></div>
    <script>
    function log() {
        var args = arguments;
        var str = '';

        var console = document.getElementById('console');

        for (var i = 0; i < args.length; i++) {
            str += args[i].toString();
            if (i < args.length - 1) {
                str += ', ';
            }
        }
        str += '<br>';

        console.innerHTML += str;
    }
    </script>
    <h1>测试my.js的touch方法，测试点透问题</h1>


    <div id="mask" style="display: none; position: fixed; top: 0; left: 0; z-index: 10; width: 100%; height: 1000px; background-color: #eee; text-align: center;">
        点击会消失
    </div>

    <h3>m$(str).tap(handler)</h3>
    <p id="ele_touch_tap" class="clickme" style="height: 100px;">点击弹出mask，点击mask消失，不消失则存在点透bug</p>
    <em>经测试，不存在点透bug</em>
    <em></em>
    <script>
    function showMask() {
        m$('#mask').show().tap(function(e) {
            // alert(e.target.innerHTML);
            m$(this).hide();
        });
    }
    m$('#ele_touch_tap').tap(function() {
        showMask();
    });
    </script>

    <h3>m$(str).tap(handler)</h3>
    <p id="ele_touch_tap2" class="clickme" style="height: 100px;">点击弹出mask，点击mask消失<em>且不跳转</em>，页面跳转则存在点透bug</p>
    <a href="test.html" style="display: inline-block; background-color: blue; width: 100%; height: 100px;">跳转链接，在mask弹出时点击此块区域，验证跨页面点透bug</a>
    <em>ERROR: 经测试，存在点透bug</em>
    <em></em>
    <script>
    function showMask() {
        m$('#mask').show().tap(function(e) {
            // alert(e.target.innerHTML);
            m$(this).hide();
        });
    }
    m$('#ele_touch_tap2').tap(function() {
        showMask();
    });
    </script>

    
    <h3>zepto: $(str).tap(handler)</h3>
    <script src="lib/zepto116.min.js"></script>
    <script src="lib/zepto_touch.js"></script>
    <p id="ele_touch_tap3" class="clickme" style="height: 100px;">点击弹出mask，点击mask消失<em>且不跳转</em>，页面跳转则存在点透bug</p>
    <a href="error.html" style="display: inline-block; background-color: blue; width: 100%; height: 100px;">跳转链接，在mask弹出时点击此块区域，验证跨页面点透bug</a>
    <em>ERROR: 经测试，zepto也存在跨页面点透bug</em>
    <em></em>
    <script>
    function showMask() {
        $('#mask').show().tap(function(e) {
            // alert(e.target.innerHTML);
            $(this).hide();
        });
    }
    $('#ele_touch_tap3').tap(function() {
        showMask();
    });
    </script>
</body>
</html>